<template>
  <div class="box" >
    <div class="top">
      <div class="cont">
        <div class="cont">
          <p class="route-text">
            <img src="../assets/home.png" class="home" alt="" @click="toHome">
            <span class="span-margin">/</span>
            <span>个人中心</span>
          </p>
          <p class="title">个人中心</p>
        </div>
      </div>
    </div>
    <div class="content">
      <div class="person-space">个人空间</div>
      <div class="right-space">
        <div class="space-top">
          <img class="person-bg" src="../assets/person.png" alt="">

          <div v-if="isEdit">
              
             <img class="person-img"  :src="txUrl" alt="">
             <p class="person-name"  >{{info.name}}</p>
          </div>
          <div v-if="!isEdit" > 
            <input type="file" class="file" ref="file" @change="uploadAvatar" >
            <img  class="person-img1" :src="txUrl" alt="" @click="handleClick">
            <input  class="person-name1"  v-model="info.name" />
          </div>
          

        </div>
        <div class="space-bottom">
          <div class="info-left"><span>基本信息</span><img @click="editClick" class="edit-img" src="../assets/edit.png" alt=""></div>
          <div class="right-cont">
            <div class="info-right">
              <div class="info-detail">
                <el-form label-position="right" label-width="80px" :model="info">
                  <el-form-item label="工号">
                    <span class="span-text">{{info.cardnum}}</span>
                  </el-form-item>
                  <el-form-item label="手机号码">
                    <span class="span-text" v-if="isEdit">{{info.phone}}</span>
                    <el-input v-if="!isEdit" v-model="info.phone"></el-input>
                  </el-form-item>
                  <!-- <el-form-item label="专业">
                    <span class="span-text">{{info.major}}</span>
                  </el-form-item>
                  <el-form-item label="持有证书">
                    <span class="span-text" v-if="isEdit">{{info.certificate}}</span>
                    <el-input v-if="!isEdit" v-model="info.certificate"></el-input>
                  </el-form-item> -->
                  <el-form-item label="入职日期">
                    <!-- <span class="span-text">{{info.entryTime}}</span> -->
                    <span class="span-text">{{info.entryTime | timeFormat("YYYY-MM-DD ")}}</span>
                    <!-- <el-date-picker value-format="yyyy-MM-dd" v-if="!isEdit" v-model="info.entryTime" type="date"
                      placeholder="选择日期">
                    </el-date-picker> -->
                  </el-form-item>
                </el-form>
              </div>
              <div class="info-detail">
                <el-form label-position="right" label-width="80px" :model="info">
                  <el-form-item label="性别">
                    <span class="span-text" v-if="isEdit">{{info.sex}}</span>
                    <el-select v-if="!isEdit" v-model="sexvalue" placeholder="请选择" @change="selectChange">
                      <el-option v-for="item in sexoptions" :key="item.value" :label="item.label" :value="item.value">
                      </el-option>
                    </el-select>
                  </el-form-item>
                  <el-form-item label="生日">
                    <span class="span-text" v-if="isEdit">{{info.birth | timeFormat("YYYY年MM月DD日 ")}}</span>
                    <el-date-picker  v-if="!isEdit" v-model="info.birth" type="date"
                      placeholder="选择日期">
                      <!-- value-format="yyyy-MM-dd" -->
                    </el-date-picker>
                  </el-form-item>
                  <el-form-item label="城市">
                    <span class="span-text" v-if="isEdit">{{info.city}}</span>
                    <el-cascader size="large" v-if="!isEdit" :options="cityoptions" v-model="selectedOptions" @change="handleChange">
                    </el-cascader>
                  </el-form-item>
                </el-form>
              </div>
            </div>
            <div class="person-space sure-button" v-if="!isEdit" @click="changeSure">确认修改</div>
          </div>
        </div>
      </div>
    </div>
  </div>
  
</template>

<script>
  
  import Swiper from "../components/swiper.vue"
  import trainList from "../components/trainList.vue"
  import {
    provinceAndCityData,
    CodeToText,
    TextToCode
  } from "element-china-area-data";
  import {
    selectTeacherDetail,
    updateTeacher,
    getphotoUpload,
    updateUserDetail
  } from "@/api/center"
  import {
    getToken
  } from '@/utils/auth'
  import {
    mapState,
    mapMutations
  } from "vuex"
  export default {
    components: {
      Swiper,
      trainList
    },
    computed: {
      ...mapState(['showDialog'])
    },
    data() {
      return {
    
        isEdit: true,
        txUrl: "",
        info: {
          cardnum: "",
          major: "",
          certificate: "",
          entryTime: "",
          phone: "",
          sex: "",
          birth: "",
          city: "",
          name:"",
        },
        sexoptions: [{
          value: '男',
          label: '男'
        }, {
          value: '女',
          label: '女'
        }],
        sexvalue: '',
        cityoptions: provinceAndCityData,
        selectedOptions: [],
        userId: 0
      }
    },
    methods: {
      handleClick(){
        this.$refs.file.click();
      },
      uploadAvatar() {
      var file = this.$refs.file.files[0];
      var fileExtension = file.name.split(".")[1];
      // 创建表单对象
      var data = new FormData();
      console.log(file, fileExtension);
      data.append("file", file);
      data.append("fileExtension", fileExtension);
      getphotoUpload(data).then((res) => {
        console.log(res);
        if (res.code == 200) {
          this.txUrl = res.result.fileUrl;
          // const params = {
          //   id: this.userId,
          //   pictureurl: res.result.fileUrl,
          // };
          // // 得到图片地址，再调取修改用户信息接口，修改用户图片地址
          // updateTeacher(params).then((result) => {
          //  this.$message({
          //     message: "上传头像成功",
          //     type: 'success'
          //   });
          // });
        }
      });
    },
      ...mapMutations(['changeDialog']),
      toHome() {
        this.$router.push("/")
      },
      editClick() {
        this.isEdit = !this.isEdit;
      },
      checkPhone(phone) {
        var pattern = /^1[3456789]\d{9}$/;
        if (pattern.test(phone)) {
          return true;
        }
      },
      handleChange(value) {
        var cityArr = []
        for (let i = 0; i < this.selectedOptions.length; i++) {
          cityArr.push(CodeToText[this.selectedOptions[i]]);
        }
        this.info.city = cityArr.join(",");
      },
      getInfo() {
        let id = sessionStorage.getItem("jobNumber");
        selectTeacherDetail({
          jobNumber: id
        }).then(res => {
          console.log(res);
          if (res.result.cityName != null) {
            if (res.result.cityName.includes(",")) {
              let citycode = res.result.cityName.split(",")
              let codeRes = TextToCode
              citycode.forEach(item => {
                codeRes = codeRes[item]
              })
              codeRes = codeRes.code
              this.selectedOptions = codeRes
            } else {
              this.selectedOptions = ""
            }
          }

          this.info.cardnum = res.result.jobNumber;
          this.info.name = res.result.loginName;
          this.info.phone = res.result.phone;
          // this.info.major = res.result.speicalityName;
          // this.info.certificate = res.result.credentials;
          this.info.city = res.result.cityName;
          this.info.entryTime = res.result.entryDate;
          this.info.birth = res.result.birthday;
          this.userId = res.result.id;
          this.txUrl = res.result.pictureUrl;
          if (res.result.sex == 0) {
            this.info.sex = "男";
          } else {
            this.info.sex = "女";
          }

          this.info.entryDate = new Date(this.info.entryDate).toLocaleDateString().replace(/\//g, "-");
          // this.info.birthday = new Date(this.info.birthday).toLocaleDateString().replace(/\//g, "-");
          this.sexvalue = this.info.sex;
        })
      },
      selectChange(value) {
        this.info.sex = value == "男" ? "男" : "女";
      },






      changeSure() {
        let updateSex = 0;
        if (this.info.sex == "男") {
          updateSex = 0;
        } else {
          updateSex = 1;
        }
        if (!this.checkPhone(this.info.phone)) {
          this.$message({
            message: '请输入正确的手机号码',
            type: 'warning'
          });
          return;
        }
        const params = {
          id: this.userId,
          phone: this.info.phone,
          birthday: this.info.birth,
          cityName: this.info.city,
          sex: updateSex,
          pictureurl: this.txUrl,
          loginName:this.info.name,
          pictureurl: this.txUrl,
        }
        updateTeacher(params).then(res => {
          console.log(res);
          if (res.code == 410) {
            this.$message({
              message: "请登录后修改",
              type: 'info'
            });
            this.changeDialog(true);
          } else if (res.code == 200) {
            this.$message({
              message: "修改成功",
              type: 'success'
            });
          }
        })
        this.isEdit = !this.isEdit;
      }
    },
    created() {
      this.getInfo()
    }
  }
</script>

<style scoped="scoped">
  .box {
    width: 100%;
  }
  .file{
    display: none;
}

  .top {
    width: 100%;
    height: 120px;
    background-color: #106470;
    padding-top: 0px;
    box-sizing: border-box;
  }

  .cont {
    width: 1200px;
    margin: 0 auto;
  }

  .content {
    width: 1200px;
    margin: 0 auto;
    padding: 24px 0;
    box-sizing: border-box;
    display: flex;
    justify-content: space-between;
  }

  .route-text {
    font-size: 12px;
    font-family: Microsoft YaHei;
    font-weight: 300;
    line-height: 26px;
    color: #FFFFFF;
    height: 55px;
    display: flex;
    align-items: center;
  }

  .span-margin {
    margin: 0 6px;
  }

  .home {
    width: 16px;
    height: 16px;
    cursor: pointer;
  }

  .title {
    font-size: 24px;
    font-family: Microsoft YaHei;
    font-weight: 300;
    line-height: 26px;
    color: #FFFFFF;
    margin-top: 10px;
  }

  .person-space {
    width: 168px;
    height: 56px;
    background: #106470;
    font-size: 18px;
    font-family: Microsoft YaHei;
    font-weight: 400;
    line-height: 56px;
    text-align: center;
    color: #FFFFFF;
  }

  .right-space {
    width: 1008px;
    height: 800px;
  }

  .space-top {
    width: 1008px;
    height: 193px;
    position: relative;
  }

  .person-bg {
    width: 1008px;
    height: 193px;
  }

  .person-img {
    width: 128px;
    height: 128px;
    border-radius: 50%;
    position: absolute;
    bottom: -43px;
    left: 440px;
  }

  .person-img1 {
    width: 128px;
    height: 128px;
    border-radius: 50%;
    position: absolute;
    bottom: -43px;
    left: 440px;
    cursor:pointer
  }

  .person-name {
    font-size: 20px;
    font-family: Microsoft YaHei;
    font-weight: 400;
    line-height: 25px;
    color: #000000;
    text-align: center;
    margin-top: 63px;
  }
  .person-name1{
     font-size: 20px;
    font-family: Microsoft YaHei;
    font-weight: 400;
    margin-top: 63px;
    width: 125px;
    margin-left: 450px;
    background-color: #FFF;
    background-image: none;
    border-radius: 4px;
    border: 1px solid #DCDFE6;
    box-sizing: border-box;
    color: #606266;
    display: inline-block;
    font-size: inherit;
    height: 40px;
    line-height: 40px;
    outline: 0;
    padding: 0 15px;
  }

  .space-bottom {
    width: 1008px;
    background: #FFFFFF;
    border: 1px solid #E9E9E9;
    margin-top: 109px;
    padding: 30px;
    box-sizing: border-box;
    display: flex;
  }

  .info-left {
    font-size: 20px;
    font-family: Microsoft YaHei;
    font-weight: 400;
    height: 30px;
    color: #000000;
    display: flex;
    align-items: center;
    margin-right: 30px;
  }

  .edit-img {
    width: 24px;
    height: 24px;
    margin-left: 12px;
    cursor:pointer;
  }

  .span-text {
    width: 220px;
    display: block;
    /* display: inline-block; */
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .info-right {
    display: flex;
    margin-top: 50px;
  }

  .info-right .info-detail:first-child {
    margin-right: 50px;
  }

  .info-right .info-detail:last-child {
    margin-left: 50px;
  }

  .right-cont {
    display: flex;
    flex-direction: column;
  }

  .sure-button {
    margin: 15px auto;
    cursor: pointer;
  }
</style>
